﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DatePacker.aspx.cs" Inherits="web.DatePacker" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
   
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
   
    <script src="javascript/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="javascript/jquery.ui.core.js" type="text/javascript"></script>    
    <script src="javascript/jquery.ui.datepicker.js" type="text/javascript"></script>
    <script src="javascript/DatePicker-CN.js" type="text/javascript"></script>
    <script src="javascript/jquery.validate.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){           
            $("#StartDate").datepicker({showOn: 'button', buttonImage: 'images/calendarIcon.gif', buttonImageOnly: true});
            $("#EndDate").datepicker({showOn: 'button', buttonImage: 'images/calendar.png', buttonImageOnly: true});
           
           
           $("#btnSubmit").click(function(){
            
                 var StartDate = $("#StartDate").val();
		         var EndDate = $("#EndDate").val();        				
		        if(StartDate != "" && EndDate != "")
		        {        		
			        if(StartDate > EndDate)
			        {
				        $("#EndDate").addClass("errorDate");
				       
				        return false;
			        }
			        else
			        {
				        $("#EndDate").removeClass("errorDate");
				        return true;	
			        }
		        }
		        else
		        {
			        return true;	
		        }           
            });            
        });
                
    </script>
    
    <style type="text/css">
        
    .div{height:35px; line-height:35px; border:#eee solid 1px;}
    .errorDate{background:#ffd6cb; border:#7f9db9 solid 1px; height:18px;}
    </style>
         
</head>
 <body style="font-size:12px;" >
    <form id="form1" runat="server">   
     <div class="div">
 	    <input type="text" id="StartDate" name="StartDate" />
 	 </div>
 	 <div class="div">
 	    <input type="text" id="EndDate" name="EndDate"  />
 	 </div>
 	 <input id="btnSubmit" name="btnSubmit" type="submit" value="submit" />
     
    </form>
</body>
</html>
